<script>
import { defineComponent, ref, onMounted } from '@vue/composition-api';
import { checkActivity, GetUserList } from '@/api/activity';
import router from '@/router';
import { mapGetters } from 'vuex';
import { ActivityStatusMap, ActivityContentMap, ActivityTypeMap } from '../enum';
import { MessageBox, Message } from 'element-ui';
import Clipboard from 'clipboard';
export default defineComponent({
  props: {
    detail: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    ...mapGetters(['name']),
  },
  setup(props) {
    const checkRemark = ref();
    const curSteps = ref(2);
    const stepsText = ref("");
    const formModel = ref({
      type: null,
      checkRemark: null,
      overCheckRemark: null,
    });
    const formRule = ref({
      type: [{ required: true, message: '请选择审核', trigger: 'change' }],
      checkRemark: [{ required: true, message: '请输入活动审批意见', trigger: 'change' }],
      overCheckRemark: [{ required: true, message: '请输入完结审批意见', trigger: 'change' }],
    });
    const loading = ref(false);
    const formRef = ref();

    // 人员数据
    const searchUser = async (query, adminIdNum) => {
      loading.value = true;
      const payload = {
        keyword: query,
        pageSize: 99,
        pageNum: 1,
      };
      const response = await GetUserList(query);
      loading.value = false;
      if (response.code === 200) {
        // const res = new Map();
        // userList.value = response.rows.filter((response.rows) => !res.has(response.rows.unitName) && res.set(response.rows.unitName,1));
        console.log(query, response.rows[0].userName, 'reoeoeoeooe');
        return response.rows[0].userName;
        // if(adminIdNum==1){
        //   props.detail.adminId = response.rows[0].userName;
        // }else{
        //   props.detail.adminId2 = response.rows[0].userName;
        // }
      }
    };
    // 下载
    const openUrl = fileName => {
      console.log(props.detail.postId, fileName, 'detail.postId');
      window.open(process.env.VUE_APP_BASE_API +`/api/images/showLocal?name=${fileName}`);
    };
    //预览
    const preview = fileName => {
      console.log(fileName, 'fileName');
      window.open(
        'https://ow365.cn/?i=29710&ssl=1&furl=' + process.env.VUE_APP_BASE_API + '/api/images/showLocal?name=' +
          fileName
      );
    };
    const cancelActvity = () => {
      MessageBox.confirm(`确认取消活动?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        loading.value = true;
        const payload = {
          activityId: props.detail.activityId,
          activityStatus: 7,
        };
        const response = await checkActivity(payload);
        loading.value = false;
        if (response.code === 200) {
          Message({
            message: '取消成功',
            type: 'success',
          });
          router.go(-1);
        }
      });
    };

    const check = async query => {
      query.validate(async valid => {
        if (valid) {
          console.log(formModel, 'formModel');
          loading.value = true;
          const payload = {
            activityId: props.detail.activityId,
            activityStatus: formModel.value.type,
            checkRemark: formModel.value.checkRemark,
            overCheckRemark: formModel.value.overCheckRemark,
          };
          const response = await checkActivity(payload);
          loading.value = false;
          if (response.code === 200) {
            Message({
              message: '审核成功',
              type: 'success',
            });
            router.go(-1);
          }
        } else {
          Message.error({
            message: '请完整审核信息',
          });
        }
      });
    };

    const editActivity = (activityId, type, studentId) => {
      router.push({ path: '/activity/createActivity', query: { activityId, type, studentId } });
    };
    const copy = () => {
      var clipboard = new Clipboard('.tag-read');
      clipboard.on('success', e => {
        console.log('复制成功');
        Message({
          message: '复制成功',
          type: 'success',
        });
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on('error', e => {
        // 不支持复制
        console.log('该浏览器不支持自动复制');
        Message.error({
          message: '该浏览器不支持自动复制',
        });
        // 释放内存
        clipboard.destroy();
      });
    };

    onMounted(() => {
      // loadData();
      var state = [];
      // setTimeout(() => {
      //   //  }, 1000)
      //   if (props.detail) {
      //     if (props.detail.chair) {
      //       //有宣传部讲座审批单直接系统审核
      //       // 1,提交 2.系统审核 3.报名 4.活动进行 5.完结 6.完结审核
      //       state = [1, 0, 1, 4, 5, 6, 4, 0, 2, 3, 4, 4, 4, 1];
      //     } else {
      //       // 1,提交 2.审核员审核 3.系统审核 4.报名 5.活动进行 6.完结 7.完结审核
      //       state = [2, 0, 1, 5, 6, 7, 5, 0, 3, 4, 5, 5, 5, 1];
      //     }
      //     console.log(state, 'state');
      //     if (props.detail.activityStatus == '-1') {
      //       curSteps.value = 0;
      //     } else {
      //       curSteps.value = state[props.detail.activityStatus];
      //     }
      //     console.log(curSteps.value, 'curSteps.value');
      //     if (props.detail.nextAuditor.length >= 1) {
      //       var checkUser = props.detail.nextAuditor[0].nickName; // + '-' + props.detail.nextAuditor[0].userName
      //       for (
      //         let i = 1;
      //         i < (props.detail.nextAuditor.length >= 3 ? 3 : props.detail.nextAuditor.length - 1);
      //         i++
      //       ) {
      //         checkUser = checkUser + (i == 0 ? '' : '\n') + props.detail.nextAuditor[i].nickName;
      //         //  +
      //         // '-' +
      //         // props.detail.nextAuditor[i].userName;
      //         console.log(checkUser, 'checkUser');
      //       }
      //       console.log(checkUser, 'checkUser');
      //       stepsText.value = checkUser;
      //     }
      //   }
      // }, 1000);
    });

    return {
      ActivityStatusMap,
      ActivityContentMap,
      ActivityTypeMap,
      openUrl,
      preview,
      cancelActvity,
      searchUser,
      check,
      checkRemark,
      curSteps,
      stepsText,
      formModel,
      formRef,
      formRule,
      editActivity,
      copy,
    };
  },
});
</script>

<template>
  <div class="app-container">
    <el-row>
      <el-descriptions border :column="2">
        <el-descriptions-item>
          <template slot="label"> 活动名称 </template>
          {{ detail.orgName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 指导老师 </template>
          {{ detail.teacherName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 发起单位 </template>
          {{ detail.unitName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 学生管理员 </template>
          {{ detail.studentName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 活动时间 </template>
          {{  detail.date}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 学分 </template>
          {{ detail.mark }}
        </el-descriptions-item>
        </el-descriptions>
    </el-row>
    <el-form
      ref="formRef"
      :model="formModel"
      :rules="formRule"
      inline
      size="mini"
      v-if="detail.activityStatus == 0"
      style="padding-top: 20px"
      v-hasPermi="['activity:manager:approvalPass']"
    >
      <el-row :gutter="24">
        <el-col :span="22">
          <el-form-item v-if="formModel.type == '1'" label="系统管理员审批意见" prop="checkRemark">
            <el-input
              style="width: 450px"
              v-model="formModel.checkRemark"
              placeholder="请输入审批不通过原因"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="系统管理员审核" prop="type">
          <el-select v-model="formModel.type" placeholder="请选择">
            <el-option label="审核通过" value="8" />
            <el-option label="审核不通过" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="check(formRef)">审核确认</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <el-form
      ref="formRef"
      :model="formModel"
      :rules="formRule"
      inline
      size="mini"
      v-if="detail.activityStatus == 2"
      style="padding-top: 20px"
      v-hasPermi="['activity:manager:approvalPass1']"
    >
      <el-row :gutter="24">
        <el-col :span="22">
          <el-form-item v-if="formModel.type == '13'" label="审核员审批意见" prop="checkRemark">
            <el-input
              style="width: 450px"
              v-model="formModel.checkRemark"
              placeholder="请输入审批不通过原因"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="审核员审核" prop="type">
          <el-select v-model="formModel.type" placeholder="请选择">
            <el-option label="审核通过" value="0" />
            <el-option label="审核不通过" value="13" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="check(formRef)">审核确认</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row style="padding-top: 10px">
      <!-- <el-button
        v-if="['0', '1'].includes(detail.activityStatus)"
        v-hasPermi="['activity:manager:cancel']"
        type="danger"
        size="small"
        @click="cancelActvity()"
        >取消活动</el-button
      > -->
      <!-- <el-button
        type="primary"
        size="small"
      >
        活动总结
      </el-button> -->
      <!-- <el-button
        v-hasPermi="['activity:manager:finish']"
        type="primary"
        size="small"
        v-if="['3', '6'].includes(detail.activityStatus)"
        @click="editActivity(detail.activityId, 2, name)"
      >
        办结
      </el-button> -->
    </el-row>
  </div>
</template>
<style scoped>
::v-deep .el-step .el-step__description {
  white-space: pre-line;
}
</style>
